<template>
  <el-container id="mainContainer">
    <el-aside id="aside" :width="isFold ? '60px' : '180px'">
      <el-menu id="menu" background-color="#eeeeee" text-color="#091f44" active-text-color="#4b9100" unique-opened
        :collapse="isFold" :collapse-transition="false" router>
        <template v-for="item in menuList">
          <el-menu-item :index="item.name" v-if="item.children == undefined">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
          <el-submenu :index="item.name" v-if="item.children != undefined">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="item1 in item.children">
              <el-menu-item :index="item1.name" v-if="item1.children == undefined && item1.type <= permission">{{ item1.title }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <el-container style="min-width: 600px">
      <el-header id="header">
        <span id="toggleButton" @click="toggleFold"><i class="el-icon-s-fold" id="flex"></i></span>
        <div style="display: flex;justify-content: center;align-items: center;margin-right: 3%;">
          <img src="../../assets/敏盖 Logo.png" style="height: 30px; margin-bottom: 5px" alt="logo加载失败" />
          <div id="content">
            <span id="childText">敏盖绒山羊信息管理系统</span>
            敏盖绒山羊信息管理系统
          </div>
        </div>
        <el-popover placement="top" trigger="hover">
          <div style="text-align: center">
            <a @click="detail"
              style="color: #000;letter-spacing: 2px;text-decoration: none;cursor: pointer;">个人信息</a><br />
            <a @click="logOut" style="color: #000;letter-spacing: 2px;text-decoration: none;cursor: pointer;">退出登录</a>
          </div>
          <el-button circle slot="reference" id="userimg"><img src="../../assets/logo.png" alt="用户名" /></el-button>
        </el-popover>
      </el-header>
      <el-main id="main">
        <transition name="el-fade-in-linear">
          <keep-alive>
            <!-- 路由跳转后不销毁页面(防止页面自动刷新) -->
            <router-view></router-view>
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        permission: 1,
        isFold: false,
        menuList: [{
          name: "mainPage",
          icon: "el-icon-user-solid",
          title: "我的主页",
          children: [
            { name: "/home", title: "我的主页", type: 0 },
            { name: "/userPage", title: "用户信息", type: 1 },
          ]
        },
        {
          name: "sheepFlockInfo",
          icon: "el-icon-tickets",
          title: "羊群信息",
          children: [
            { name: "/cardInfo", title: "卡片信息", type: 0 },
            { name: "/basicInfo", title: "基本信息", type: 0 },
            { name: "/pedigreeFile", title: "系谱档案", type: 0 },
            { name: "/productionPerformance", title: "生产性能", type: 0 }
          ]
        },
        {
          name: "cashmereInfo",
          icon: "el-icon-s-data",
          title: "绒质信息",
          children: [
            { name: "/finenessDete", title: "细度检测", type: 0 },
            { name: "/dataAnalysis", title: "数据分析", type: 0 },
          ]
        },
        {
          name: "fertilityInfo",
          icon: "el-icon-male",
          title: "配种信息",
          children: [
            { name: "/breedInfo", title: "配种记录", type: 0 },
            { name: "/lambingInfo", title: "产羔信息", type: 0 },
          ]
        },
        {
          name: "casesInfo",
          icon: "el-icon-first-aid-kit",
          title: "病例信息",
          children: [{ name: "/casesRecord", title: "病例记录", type: 0 }]
        },
        {
          name: "salesInfo",
          icon: "el-icon-sell",
          title: "销售信息",
          children: [{ name: "/salesRecord", title: "销售记录", type: 0 }]
        },
        {
          name: "six",
          icon: "el-icon-s-data",
          title: "汇总统计",
          children: [
            { name: "six-1", title: "死淘分析", type: 0 },
            { name: "six-2", title: "收入支出", type: 0 },
            { name: "/dataAnalysis", title: "数据分析", type: 0 }
          ]
        },
        {
          name: "seven",
          icon: "el-icon-more",
          title: "其它"
        }
        ]
      };
    },
    methods: {
      async logOut() {
        const answer = window.confirm('确定退出登录?')
        if (answer) {
          let { data } = await this.$axios({
            method: "post",
            url: "/logout"
          });
          this.$message({
            type: "success",
            message: "退出成功",
            duration: 1500
          });
          this.$router.replace("/login");
        }else{
          this.$message({
            type: "info",
            message: "取消退出",
            duration: 1500
          });
        }
      },
      // 菜单折叠按钮
      toggleFold(e) {
        this.isFold = !this.isFold;
        this.isFold ? e.target.className = "el-icon-s-unfold" : e.target.className = "el-icon-s-fold"
      },
      //跳转登录用户信息
      detail() {
        this.$router.push("/userDetails");
      }
    },
  };
</script>

<style Lang="less" scoped>
  #header {
    height: 56px !important;
    background-color: #eeeeee !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25px;
    padding-right: 3%;
    padding-left: 1%;
    /* border-bottom: 1px solid #4b9100; */
  }

  #aside {
    background-color: #eeeeee !important;
    box-shadow: 5 0 5px #4b9100;
    border-right: 1px solid #cccccc;
    border-bottom: 0;
    /* border-radius: 10px 10px 0 0; */
    margin-left: 2px;
    overflow: hidden;
    transition: 0.3s;
  }

  .el-submenu .el-menu-item {
    padding-left: 60px !important;
    background-color: #fefefe !important;
  }

  .el-submenu .el-menu-item:hover {
    background-color: #c2c2c2 !important;
  }

  #menu {
    border-right: 0;
  }

  #main {
    padding: 0;
  }

  #bodypage {
    margin: 0px !important;
    box-shadow: none !important;
  }

  #mainContainer {
    height: 100%;
  }

  #toggleButton {
    cursor: pointer;
  }

  #userimg {
    height: 40px;
    width: 40px;
    padding: 5px;
    background-color: rgba(103, 222, 243, 0.308);
    border: 0;
  }

  #userimg img {
    height: 100%;
    width: 100%;
  }

  #flex:hover {
    color: #36c20f;
  }

  a:hover {
    background-color: #43bd21;
    border-radius: 3px;
  }

  #content {
    margin: 30px 0 30px 0;
    position: relative;
    font-size: 30px;
    font-weight: 50;
    font-family: "STXingkai";
    color: #6dcbf0;
  }

  #childText {
    position: absolute;
    color: #4b9100;
    overflow: hidden;
    border-right: 2px solid #4b9100;
    animation: move 3s linear infinite alternate;
    height: 100%;
  }

  @keyframes move {

    0%,
    10%,
    100% {
      width: 0;
    }

    70%,
    90% {
      width: 100%;
    }
  }
</style>